import { useRef, useState } from "react";

function UseRef() {
  const inputRef = useRef(null);
  const [content, setContent] = useState("123");

  // dom 可用时，通过 ref.current 获取 input 元素
  const showDom = () => {
    console.log(inputRef.current);
    setContent("456");
    inputRef.current.focus();
  };

  return (
    <>
      <input
        type="text"
        ref={inputRef}
        value={content}
        onChange={(e) => setContent(e.target.value)}
      />
      <div>
        <button onClick={showDom}>获取DOM</button>
      </div>
    </>
  );
}

export default UseRef;
